<template>
  <div class="adminPage">
    <!-- 搜索框 -->
    <div class="search_area">
      <el-form
        :model="params"
        label-width="80px"
        style="display: flex; margin-bottom: 50px"
      >
        <!-- <el-form-item label="请假缘由">
          <el-input
            clearable
            placeholder="请输入请假缘由"
            v-model="params.name"
            style="width: 200px"
            prefix-icon="el-icon-search"
          />
        </el-form-item> -->
        <el-form-item label="请假用户">
          <el-input
            clearable
            placeholder="请输入请假用户"
            v-model="params.userName"
            style="width: 200px"
            prefix-icon="el-icon-search"
          />
        </el-form-item>
        <el-form-item label="审核状态">
          <el-select
            v-model="params.status"
            placeholder="请选择审核状态"
            clearable
            style="width: 200px"
          >
            <el-option label="待提交" value="0"></el-option>
            <el-option label="待审核" value="1"></el-option>
            <el-option label="已通过" value="2"></el-option>
            <el-option label="已回退" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <div class="search-buttons">
            <el-button type="warning" style="margin-left: 10px" @click="search"
              >查询</el-button
            >
            <el-button type="primary" style="margin-left: 10px" @click="addAudit" v-if="$store.state.userInfo.role !== 'ROLE_ADMIN'"
              >新增请假</el-button
            >
          </div>
        </el-form-item>
      </el-form>
    </div>

    <!--表单数据-->
    <div>
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{
          background: '#fafafa',
          color: '#262626',
          fontSize: '14px',
          fontWeight: '500',
          height: '10px',
        }"
      >
        <el-table-column
          prop="name"
          label="请假缘由"
          align="center"
        ></el-table-column>
        <el-table-column prop="time" label="请假日期" align="center">
        </el-table-column>
        <el-table-column prop="day" label="请假天数" align="center">
        </el-table-column>
        <el-table-column prop="userName" label="请假用户" align="center">
        </el-table-column>
        <el-table-column prop="status" label="审核状态" align="center">
          <template slot-scope="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="reason" label="审核意见" align="center" >
          <template slot-scope="scope">
            {{ scope.row.reason || '暂无' }}
          </template>
        </el-table-column>
        <!-- 状态 -->
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              @click="handleAudit(scope.row)"
              v-if="$store.state.userInfo.role !== 'ROLE_STUDENT' "
              >审核</el-button
            >
            <el-button
              type="success"
              @click="editAudit(scope.row)"
              v-if="$store.state.userInfo.role === 'ROLE_STUDENT' || scope.row.status === 0"
              :disabled="scope.row.status === 2"
              >编辑</el-button
            >
            <el-popconfirm
              title="确定删除吗？"
              @confirm="deleteAuditRecord(scope.row)"
            >
              <el-button slot="reference" type="danger">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="block" style="margin-top: 20px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.pageNo"
        :page-sizes="[1, 5, 10, 20]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- 新增用户/修改用户 抽屉 -->
    <el-drawer
      :title="drawerTitle"
      :visible.sync="drawerVisible"
      :direction="direction"
      :before-close="handleClose"
    >
      <audit-drawer
        :isEdit="isEdit"
        :isAudit="isAudit"
        :record="currentData"
        @success="onSuccess"
        @close="drawerVisible = false"
      ></audit-drawer>
    </el-drawer>
  </div>
</template>

<script>
import {  getAuditList, deleteAudit } from '@/api/sys/audit';
import AuditDrawer from "./components/AuditDrawer.vue"; // 

export default {
  name: "audit",
  components: {
    AuditDrawer,
  },
  data() {
    return {
      //分页查询参数
      params: {
        pageSize: 10,
        pageNo: 1,
        name: "", // 请假缘由
        status: "", // 审核状态
        userName: "", // 请假用户 (用于搜索)
      },
      tableData: [], //表单数据
      loading: false, //加载状态
      total: 0, //数据条数
      isEdit: false, //是否是编辑状态
      isAudit: false, //是否是审核状态
      drawerVisible: false,//抽屉可见状态
      drawerTitle: "", //抽屉标题
      currentData: {}, //当前行数据
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    //加载审批数据
    async loadData() {
      this.loading = true;
      try {
        const res = await getAuditList(this.params);
        if (res.code === 200) {
          this.tableData = res.data.list || [];
          this.total = res.data.total || 0;
        } else if (res.code === 10001) {
          this.$message.error(res.message);
          this.$store.dispatch("Logout");
        }
      } finally {
        this.loading = false;
      }
    },
    //根据输入模糊查询
    search() {
      this.params.pageNo = 1;
      this.loadData();
    },
    //页码尺寸变化
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize;
      this.params.pageNo = 1;
      this.loadData();
    },
    //当前页变化
    handleCurrentChange(pageNo) {
      this.params.pageNo = pageNo;
      this.loadData();
    },
    //新增请假
    addAudit() {
      this.currentData = {};
      this.drawerVisible = true;
      this.drawerTitle = "新增请假";
    },

    //删除审批记录
    deleteAuditRecord(data) {
      this.$confirm("此操作将永久删除该请假审批记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        const id = data.id;
        deleteAudit(id).then((res) => {
          if (res.code === 200) {
            this.$message.success("删除成功");
            this.loadData();
          } else {
            this.$message.error(res.message);
          }
        });
      }).catch(() => {
        this.$message.info("已取消删除");
      });
    },

    //修改审批记录
    editAudit(data) {
      this.isEdit = true;
      this.drawerVisible = true;
      this.drawerTitle = "修改请假审批";
      this.currentData = data; //当前行数据
      console.log(this.currentData);
    },

    //处理审核
    handleAudit(data) {
      this.isAudit = true;
      this.drawerVisible = true;
      this.drawerTitle = "审核请假";
      this.currentData = data; //当前行数据
      console.log(this.currentData);
    },

    //成功
    onSuccess() {
      this.loadData();
    },
    //获取审核状态文本
    getStatusText(status) {
      switch (status) {
        case 0:
          return "待提交";
        case 1:
          return "待审核";
        case 2:
          return "已通过";
        case 3:
          return "已回退";
        default:
          return "未知";
      }
    },
    //获取审核状态对应的el-tag类型
    getStatusType(status) {
      switch (status) {
        case 0:
          return "info"; // 待提交
        case 1:
          return "warning"; // 待审核
        case 2:
          return "success"; // 已通过
        case 3:
          return "danger"; // 已回退
        default:
          return "info";
      }
    },
  },
};
</script>


<style>
.adminPage {
  min-height: 100%;
}
</style>